<template>
	<ls-skeleton :loading="loading">
	<view class="container">
		<view class="con-box" v-if="list.length > 0">
			<view class='conter'>
				<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true'>
					<view class='listw'>
						<view class='list flex-row'>
							<block v-for="(item, index) in list" :key="index">
								<navigator hover-class='none'
									:url="'/pages/merchants/goods/index?cid='+item.cid + '&title=' + item.name"
									class='item flex-row row-column row-middle'>
									<view class='picture skeleton-rect'>
										<image mode="widthFix" :src="item.imgUrl || '../../../static/images/default.png'">
										</image>
									</view>
									<view class='name line1'>{{item.name}}</view>
								</navigator>
							</block>
						</view>
					</view>
					<!-- <view :style='"height:"+(height-300)+"rpx;"'></view> -->
				</scroll-view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="favor" icon="../../../../static/images/list.png" text="暂无品牌" width="320" height="320"
				textSize="24"></u-empty>
		</view>
	</view>
	</ls-skeleton>
</template>


<script>
	import {
		getCategoryList,
		getSecondCategoryByKey
	} from '@/api/cus'
	export default {
		data() {
			return {
				list: [],
				cid: 0,
				title: '',
				keyword: '',
				cityCode: 0,
				loading: true,
			}

		},

		onLoad(option) {
			let that = this;
			that.cid = option.cid || 0;
			that.title = option.title || '';
			if (!that.cid) {
				return this.$util.Tips({
					title: '品牌不存在'
				}, {
					tab: 3
				});
			}
			uni.setNavigationBarTitle({
				title: that.title
			})
			that.getCategoryList();
		},

		onShow() {

		},

		methods: {
			/**
			 * 获取品牌分类
			 */
			getCategoryList() {
				let that = this;
				getCategoryList({
					pid: that.cid
				}).then(res => {
					that.list = res.value.list;
					that.loading = false;
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			goCustomerList(cid, title) {
				let that = this;
				that.$util.Tips('/pages/merchants/goods/index?cid=' + cid + '&title=' + title);
			},
		}
	}
</script>

<style>
	.container {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		font-size: 24rpx;
	}
	
	.con-box {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	
	.conter {
		flex: 1;
		height: 100%;
		padding: 0 14rpx;
		border-radius: 50rpx;
		/* background-color: #f7f7f7; */
	}
	
	.conter .listw {
		/* padding-top: 20rpx; */
	}
	
	.conter .listw .title {
		height: 100rpx;
		align-items: center;
	}
	
	.conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}
	
	.conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}
	
	.conter .listw .title .list_title,
	.conter .listw .title uni-image,
	.conter .listw .title image {
		width: 110rpx;
		height: 26rpx;
		border-radius: 0;
	}
	
	.conter .list {
		flex-wrap: wrap;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 26rpx;
	}
	
	.conter .list .item {
		/* width: 172rpx; */
		width: 25%;
		margin-top: 26rpx;
	}
	
	.conter .list .item .picture,
	.conter uni-image,
	.conter .list .item image {
		width: 140rpx;
		height: 140rpx;
	}
	
	
	.conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
	
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
</style>